<template>
  <view class="vehicle-verify-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="false" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无数据">
      <template #top>
        <up-navbar title="系统角色列表" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
          @leftClick="handleBackClick">
          <template #right>
            <view @click="handleRoleAdd">新增角色</view>
          </template>
        </up-navbar>

        <up-sticky class="padding-20" bgColor="transparent">
          <up-search :clearabled="true" :showAction="false" placeholder="请输入角色名称"></up-search>
        </up-sticky>
      </template>

      <view class="vehicle-verify-list">
        <view class="list-item-card" v-for="(item, index) in currentList" :key="index">
          <view class="card-header">
            <view class="title">
              序号：<text class="number">1</text>
            </view>
          </view>
          <view class="card-content-box">
            <view class="content">
              <view class="item">
                <text class="label">
                  角色名称：
                </text>
                <text class="value">
                  超级管理员
                </text>
              </view>
              <view class="item">
                <text class="label">
                  备注：
                </text>
                <text class="value">
                  无
                </text>
              </view>
            </view>
            <view class="card-footer">
              <view class="checkbox-box">
              </view>
              <view class="operate">
                <up-button type="warning" text="编辑权限" plain class="custom-style"
                  @click="handlePremissionEdit(item)"></up-button>
                <up-button type="primary" text="编辑角色" class="custom-style" @click="handleRoleEdit(item)"></up-button>
                <up-button type="error" text="删除角色" class="custom-style" @click="handleDel(item)"></up-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <RoleModal v-model:show="showRole" :type="type" :row-data="editingData" />
    <PermissionModal v-model:show="showPremission" :type="type" :row-data="editingData" />
    <up-modal :show="delShowModal" contentTextAlign="center" showCancelButton closeOnClickOverlay title="提示"
      content='是否确认删除？' @cancel="closeDelModal" @confirm="closeDelModal" @close="closeDelModal"></up-modal>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getRealNameVerifyList } from '@/api';
import { useBoolean } from '@/hooks/index';
import RoleModal from './components/RoleModal.vue'
import PermissionModal from './components/PermissionModal.vue'

const currentTab = ref(0);
// z-paging 组件引用
const paging = ref(null)

// 当前显示的列表数据
const currentList = ref([])
const type = ref('add');
const editingData = ref<any>(null);

const { bool: showRole, setTrue: openRoleModal } = useBoolean();
const { bool: showPremission, setTrue: openPremissionModal } = useBoolean();
const { bool: delShowModal, setTrue: openDelModal, setFalse: closeDelModal } = useBoolean();

function handleDel(item: any) {
  openDelModal();
}

const handleRoleAdd = () => {
  type.value = 'add'
  openRoleModal();
}

const handleRoleEdit = (item: any) => {
  type.value = 'edit'
  editingData.value = {
    roleName: '超级管理员',
    remark: '平台超级管理员',
  }
  openRoleModal();
}

const handlePremissionEdit = (item: any) => {
  type.value = 'edit'
  editingData.value = {
    treeData: [
      {
        id: 0,
        label: '工作台',
        checked: true,
      },
      {
        id: 1,
        label: '人员管理',
        children: [
          {
            id: 11,
            label: '运营商管理',
            checked: true,
          },
          {
            id: 12,
            label: '客服管理',
            checked: true,
          },
          {
            id: 13,
            label: '工作监管',
            children: [
              {
                id: 131,
                label: '巡检员位置轨迹监控',
              },
              {
                id: 132,
                label: '工单管理',
              },
              {
                id: 133,
                label: '考勤规则管理',
              },
              {
                id: 134,
                label: 'POS排班',
              },
              {
                id: 135,
                label: 'POS排班查询',
              },
            ]
          },
          {
            id: 14,
            label: '巡检管理',
            children: [
              {
                id: 141,
                label: '巡检组长',
              },
              {
                id: 142,
                label: '巡检员',
              },
            ]
          },
        ]
      },
      {
        id: 2,
        label: '系统管理',
        checked: true,
      },
    ]
  }
  openPremissionModal();
}

// 处理返回点击事件
const handleBackClick = () => {
  uni.redirectTo({
    url: '/pages/home/index'
  })
}


// 获取车辆列表数据
const queryList = async (pageNo, pageSize) => {
  console.log(pageNo, pageSize, currentTab.value)

  const params = {
    pageNum: pageNo,
    pageSize
  }

  await fetchList(params)
};

const fetchList = async (params) => {
  try {
    const result: any = await getRealNameVerifyList({ ...params, status: currentTab.value === 0 ? undefined : currentTab.value })
    const data = result.data
    paging.value.complete(data.records || [])
  } catch (error) {
    paging.value.complete(false)
  }
}


// 搜索按钮点击事件
const handleSearch = () => {
};

// 页面挂载时获取数据
onMounted(() => {
  fetchList({
    pageNum: 1,
    pageSize: 10,
  })
});
</script>

<style scoped lang="scss">
.vehicle-verify-list {
  padding: 20px;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 20rpx 30rpx;

  .time-picker {
    width: 480rpx;
    display: flex;
    align-items: center;

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }
  }

  &-location {
    display: flex;
    align-items: center;

    .location-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }

    .arrow-icon {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .waiting-count {
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
    display: flex;
    align-items: center;

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #fe6000;
      margin-left: 10rpx;
    }
  }
}

/* 列表统计 */
.list-statistics {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.list-statistics .item {
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.list-statistics .label {
  font-size: 14px;
  color: #666;
}

.list-statistics .value {
  font-size: 18px;
  font-weight: bold;
  color: #e9710f;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>